<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      padding: 2px 4px;
      margin: 0;
      width: 183px;
      font: 12px Arial;
    }
    #shortcut-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 288px;
      overflow: auto;

    }
    #shortcut-list.separation {
      border-bottom: 1px solid #dfdfdf;
      padding-bottom: 3px;
      margin-bottom: 5px;
    }
    #shortcut-list::-webkit-scrollbar {
      width: 10px;
    }
    #shortcut-list::-webkit-scrollbar-thumb {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: #b8daff;
    }
    #shortcut-list li {
      height: 20px;
      cursor: pointer;
      padding: 3px 8px;
      border: 1px solid transparent;
      margin: 2px 0;
    }
    #shortcut-list li label {
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 83%;
    }
    #shortcut-list li img {
      vertical-align: middle;
      width: 19px;
      margin-right: 10px
    }
    #shortcut-list li:hover, #options:hover {
      background: -webkit-gradient(linear, left top, left bottom, from(#f9ffff),
        to(#eefbfa));
      border: 1px solid #b8daff;
      border-radius: 3px;
    }
    #options {
      cursor: pointer;
      padding: 6px 37px;
      border: 1px solid transparent;
    }
    #tip {
      display: inline-block;
      position: fixed;
      padding: 10px 15px;
      text-align: center;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      min-width: 70px;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-transition: top .5s ease-out 0s;
      top: -37px;
      text-align: center;
      position: absolute;
      z-index: 50;
      background: #fff1a8;
      -webkit-box-shadow: 1px 1px 4px #ddd;
      color: #000;
    }
    #tip.show {
      top: 0;
    }
    embed {
      position: absolute;
      top: 0;
    }
  </style>
</head>
<body>
<ul id="shortcut-list"></ul>
<div id="options"></div>
<div id="tip" class="tip"></div>
<embed id="plugin" width="0" height="0" type="application/x-switch"></embed>
<script src="js/switch_util.js"></script>
<script src="js/rock.js"></script>
<script src="js/i18n.js"></script>
<script src="js/fs.js"></script>
<script src="js/tip.js"></script>
<script src="js/shortcuts_storage.js"></script>
<script>
(function() {
  var $shortcutList = $('#shortcut-list');
  var $options = $('#options');
  $options.text(i18n['options']);
  
  var shortcuts = ShortcutsStorage.getShortcuts();

  if (Object.keys(shortcuts).length)
    $shortcutList.addClass('separation');

  // Add shortcut into shortcut list.
  for (var shortcutId in shortcuts) {
    var shortcut = shortcuts[shortcutId];
    var iconData = Fs.getIconData(shortcut.name, shortcut.path);
    if (iconData) {
      var li = document.createElement('li');
      li.id = shortcutId;

      var icon = document.createElement('img');
      $(icon).attr({
        src: iconData,
        alt: 'icon'
      });

      var label = document.createElement('label');
      $(label).text(shortcut.name);

      $(li).append(icon).append(label).attr('title',
        i18n['click_to_launch'] + ' ' + shortcut.name);
      $shortcutList.append(li);
    } else {
      // Retrieve shortcut data from fs failed.
    }
  }

  $shortcutList.on('click', function(e) {
    e.stopPropagation();
    var target = e.target;
    var shortcutId;
    if (target.tagName == 'IMG' || target.tagName == 'LABEL') {
      shortcutId = target.parentNode.id;
    }
    if (target.tagName == 'LI') {
      shortcutId = target.id;
    }
    launch(shortcutId);
  });

  $options.on('click', function() {
    chrome.tabs.create({
      url: 'options.html'
    });
  });

  function launch(shortcutId) {
    var shortcut = ShortcutsStorage.getShortcut(shortcutId);
    if (shortcut) {
      var result = Fs.startup(shortcut.name, shortcut.path);
      if (result) {
        // Startup shortcut ok.
        Tip.alert('shortcut_startup_done')
      } else {
        Tip.alert('shortcut_startup_failed');
      }
    } else {
      // Save failed
      Tip.alert('shortcut_invalid');
    }
  }
})();
</script>
</body>
</html>